<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>02-回调函数形式的ref</title>
  <script src="../其他/js/react.development.js"></script>
  <script src="../其他/js/react-dom.development.js"></script>
  <!-- Don't use this in production: -->
  <script src="../其他/js/babel.min.js"></script>
  <!-- 添加了一个 PropTypes 对象, 可以对props属性进行限制 -->
  <script src="https://cdn.staticfile.org/prop-types/15.5.10/prop-types.js"></script>
</head>
<body>
  <div id="test"></div>
  <script type="text/babel">
  class Demo extends React.Component {
    showData1 = () => {
      console.log(this);
      const {ipt1} = this
      alert(ipt1.value)
    }
    showData2 = () => {
      const {ipt2} = this
      alert(ipt2.value)
    }
    render() {
      // 回调中的形参就是当前ref所在的节点
      return (
        <div>
          <input ref={ item => this.ipt1 = item } type="text" placeholder="输入文字"/> &nbsp;
          <button onClick={this.showData1}>点我提示左侧文字</button> &nbsp;
          <input ref={ item => this.ipt2 = item } onBlur={this.showData2} type="text" placeholder="失去焦点显示文字" />
        </div>
      )
    }
  }
  ReactDOM.render(<Demo/>, document.getElementById('test'))
  
  </script>
</body>
</html>